<template>
  <div class="functionalityBox">
    <el-icon @click="setlanguage" title="翻译" :size="15">
      <svg
        preserveAspectRatio="xMidYMid meet"
        viewBox="0 0 24 24"
        width="1.2em"
        height="1.2em"
        data-v-12008bb2=""
      >
        <path
          fill="currentColor"
          d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"
        ></path>
      </svg>
    </el-icon>
    <el-icon @click="setDisplayMode">
      <svg v-if="store.state.displayMode" viewBox="0 0 24 24" class="dark-icon">
        <path
          d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z"
          fill="currentColor"
        ></path>
      </svg>
      <svg v-else viewBox="0 0 24 24" class="light-icon">
        <path
          d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"
          fill="currentColor"
        ></path>
      </svg>
    </el-icon>
    <el-icon title="缩放" :size="15" @click="SetFullScreen">
      <FullScreen />
    </el-icon>
  </div>
</template>
<script lang="ts" setup>
import { useStore } from "vuex";
import screenfull from "@/utils/screenfull";
const store = useStore();
const setlanguage = () => {
  store.commit("setLocale", store.state.locale == "zhCn" ? "en" : "zhCn");
};
const setDisplayMode = () => {
  store.commit("setDisplayMode", store.state.displayMode ? "" : "dark");
};
const SetFullScreen = () => {
  //screenfull.isEnabled  此方法返回布尔值，判断当前能不能进入全屏
  if (!screenfull.isEnabled) {
    return false;
  }
  //screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏
  screenfull.toggle();
};
</script>
<style lang="scss" scoped>
.functionalityBox {
  height: 20px;
  position: fixed;
  right: 20px;
  top: 20px;
  display: flex;
  justify-content: flex-end;

  > i {
    height: 100%;
    width: 100%;
    margin-left: 10px;
  }
}
</style>